// 1、定义容器
// 2、使用容器中的state
// 3、管理state
// 4、容器中action 的使用

import { defineStore } from "pinia";
interface todoRow {
    id: number,
    title: string,
    status: boolean
}

/*
    参数1 根容器  piain会把所有的容器过载到跟容器中，容器的名字必须唯一
    参数2 选项对象
*/
const useMainStore = defineStore('main', {
    /*
    类似与组件的data，用来储存全局状态
    1、必须是函数，这样是为了在服务端渲染的时候避免交叉请求导致的数据污染
    2、必须是箭头函数，为了更好的ts类型推导
    */
    state: () => {
        return {
            todoList: [] as todoRow[], //存储全部完成的数据
            ActiveList:[] as todoRow[],//存储未完成的数据
            Completed:[] as todoRow[],//存储完成的数据
            // ClearCompleted:[] as todoRow[],//存储清空的数据
        }
    },
    //类似于组件的computed，用来封装计算属性，有缓存的功能 （是个对象）
    getters: {
        items():number {
            return this.todoList.length
        }
    },
    //类似于组件的methods，封装业务逻辑修改state
    actions: {
        //渲染
        todoChang(todoData: todoRow[]) {
            this.todoList = todoData//存储全部的数据
            this.ActiveList = todoData //存储未完成的数据
            this.Completed = todoData //存储完成的数据
            // this.ClearCompleted = todoData//存储清空已完成的数据
        },
        //修改
        pushTodo(todoData: todoRow) {
            this.todoList.push(todoData)
        },
        //删除
        deletetodo(todoKey: number){
            //删除指定的下标,只删除1项
            this.todoList.splice(todoKey,1)
        }
    }
})
//使用时直接在组件中导出
export { useMainStore, todoRow }